<template>
   <div>
   <Breadcrumb />
  <div class="listHeader">
     <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">
        <el-form-item label="产品名称">
          <el-input v-model="formInline.name" size="small" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="添加时间">
          <el-date-picker  v-model="formInline.time" size="small" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" size="small">查询</el-button>
        </el-form-item>
      </el-form>
      <el-button type="warning" size="small" class="el-icon-plus" @click="addGoods">添加商品</el-button>
      <el-button type="danger" size="small" class="el-icon-delete" @click="deleteAll">批量删除</el-button>
      <div class="wrapper">
          <el-table :data="tableData" border style="width:100%" header-cell-class-name="active-header"
            cell-class-name="table-center"
            @selection-change="changeTable" @select-all="changeTable">
            <el-table-column type="selection" align="center"  width="55"></el-table-column>
            <el-table-column prop="id" label="商品编号" align="center" width="80"></el-table-column>
            <el-table-column prop="title" label="商品名称" align="center" width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                   <span @click="goodsDese(scope.$index,scope.row)" style="color:blue;cursor:pointer;">{{ scope.row.title  }}</span>
                </template>
            </el-table-column>
            <el-table-column  prop="price" label="商品价格" align="center" width="80"></el-table-column>
            <el-table-column  prop="category" label="商品类目" align="center" width="100"></el-table-column>
            <el-table-column  prop="image" label="图片" align="center" width="100">
               <template slot-scope="scope">
                  <!-- :src="require('../../assets/'+ item.picUrl +'.png')" -->
                  <el-image style="width:80px;height:80px;" :src="imgs"></el-image>
                </template>
            </el-table-column>
            <!-- :formatter="dateFormat" -->
            <el-table-column  prop="created"  label="添加时间" align="center" width="190">
               <!-- prop 获取列字 字段标识  template slot-scope="scope" 当前作用域下  scope 获取当前行的数据信息-->
               <template slot-scope="scope">
                    {{   dayjs(scope.row.created).format('YYYY年MM月DD日 HH:mm:ss')   }}
               </template>
            </el-table-column>
            <el-table-column  prop="sellPoint" label="商品卖点" align="center" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column  prop="descs" label="商品描述" align="center" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column  label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" class="el-icon-edit" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" class="el-icon-delete" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                 </template>
            </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination"  />
  </div>
</div>
</template>
<script>
import imgage from '@/assets/images/aa.png'
import dayjs from 'dayjs'
import { removeHTMLTag } from "@/utils/utils"
import Pagination from '@/components/Pagination.vue'
import { mapMutations } from 'vuex'
export default {
    name:"List",
    components:{
      Pagination
    },
    data() {
        return {
            imgs:imgage,
            formInline:{
              name: '',
              time: ''
            },
            tableData:[],
            listTotal:[],
            searchStatus:false,   // 查看状态打开
            total:100,
            pageSize:1,
            currentPage:1,
            ids:[],    // 储存选中的 id
          }
    },
    created(){
      this.getGoodsList(1);
    },
    methods:{
        dayjs,
        ...mapMutations('product',['changeRowData','changeTitle']), 
        addGoods(){
            this.changeTitle('添加')
            this.$router.push('/goods/addgoods')
        },
        //格式化表格时间
        // dateFormat(row,column){
        //     let date = row[column.property]
        //     return dayjs(date).format('YYYY年MM月DD日 HH:mm:ss')
        // },
        // 查询按钮
        async onSearch() {
            if(!this.formInline.name){
               this.$message.error('请输入信息再去搜索')
               return '';
            }
            const res = await this.$api.getGoodsSearch({search:this.formInline.name})
            if(res.data.status ===200){
               // 获取所有的数据
               this.listTotal = res.data.data.list;
               // 渲染页面
               if(res.data.data.list.length > 8){
                  this.tableData = res.data.data.list.slice(0,8);
                  // 修改分页状态
                  this.searchStatus = true;
               }else{
                  this.tableData = res.data.data.list
               }
               this.pageSize = 8;
               this.total = res.data.data.total;
            }else{
               this.tableData = [];
               //this.pageSize = 8;
               this.total = 0;
            }
        },
        // 批量删除
        async deleteAll(){
           // 传递的ids 是字符串 
           let idsStr = this.ids.join(',');
           this.$confirm('此操作将永久删除读文件,是否继续?','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type:'warning'
           }).then(async ()=>{
                // 请求批量删除的接口
                // let res = await this.$api.batchDelte({ids:idsStr})
                let res = { 
                   data:{
                      status:200
                   }
                }
                if(res.data.status ===200){
                  this.$message({
                     type: 'success',
                     message: '删除成功!'
                  });
                   // 获取当前是否是最后一页的数据操作 
                   // 获取当前的数据可以展示多少条数据 
                   let maxPage = Math.ceil(this.total/this.pageSize);
                   // 获取选中的个数
                   let len = this.ids.length;
                   if(maxPage === this.currentPage){
                      let num = this.total%this.pageSize === 0?this.pageSize:this.total%this.pageSize;
                      console.log('num',num);
                      if(num===len){
                         this.currentPage = this.currentPage -1 > 0 ? this.currentPage -1:1;
                      }
                   }
                   // 删除成功
                   this.getGoodsList(this.currentPage)
                }
           }).catch(()=>{
                this.$message({ 
                    type:'info',
                    message:'已取消删除'
                })
           })
        },
        changeTable(select){
           let arr = []
           select.forEach(item=>{
              arr.push(item.id)
           })
           this.ids = arr;
        },
        // 查看商品详情
        goodsDese(index,row){
           this.changeRowData(row); 
           this.changeTitle('详情')
           this.$router.push('/goods/addgoods')
        },
        // 编辑
        handleEdit(index,row){
           this.changeRowData(row); 
           this.changeTitle('编辑')
           this.$router.push('/goods/addgoods')
        },
        // 删除
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(() => {
              this.deleteGoods(row.id)
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });          
            });
        },
        // 删除单个商品的接口
        async deleteGoods(id){
           let res = await this.$api.getDeleteGoods({id})
           if(res.data.status ===200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              // 更新视图
              this.getGoodsList(this.currentPage)
           }else{
              this.$message.error('错了哦,这是一条错误的信息')
           }
        },
        // 获取点击的页码
        getPagination(page){
          if(this.searchStatus){
             this.tableData = this.listTotal.slice((page-1)*8,page*8);
             return;
          }
          console.log('page888',page);
          this.currentPage = page;
          this.getGoodsList(page)
        },
        // 获取产品列表
        async getGoodsList(page){
          let res = await this.$api.getGoodsList({page});
          console.log('res7777',res);
          res.data.data.list.forEach(item=>{
               // console.log('666',item.image);
               // const images = item.image.slice(10,-4)
               item.image = this.imgs;
          })
          this.tableData = res.data.data.list;
          // 分页数据
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        },
    }
}
</script>
<style lang="less" scoped>
.listHeader{
  border:1px solid #eee;
  padding:10px;
  border-radius:6px;
  background: #fff;
}

.wrapper{
    margin-top:20px;
}

</style>